import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { getWeatherHistorySummary } from 'utils/Api'
import { Icon } from 'antd'

const HOC = (WrappedComponent, type) => {
  class HighComponent extends Component {
    constructor(props) {
      super(props)
      this.state = {
        result: null,
        echart: null,
        error: false,
      }
    }
    componentDidMount() {
      this.props.$container.scrollbar.scrollIntoView(document.querySelector(`#${type === 'gdu' ? 'gduSummary' : type}`), {
      })
      window.addEventListener('resize', () => {
        const { echart } = this.state
        echart.resize({
          width: 'auto'
        })
      })
      const echart = this.update()
      echart.resize({
        width: document.querySelector('.echart').offsetWidth + 'px'
      })
    }
    componentDidUpdate(prevProps) {
      const { leftCollapsed, rightCollapsed } = this.props
      const {echart} = this.state
      if (!echart) {
        return
      }
      if (leftCollapsed !== prevProps.leftCollapsed) {
        echart.resize({
          width: document.querySelector('.echart').offsetWidth + (leftCollapsed ? 150 : (-150)) + 'px'
        })
        return
      }
      if (rightCollapsed !== prevProps.rightCollapsed) {
        echart.resize({
          width: document.querySelector('.echart').offsetWidth + (rightCollapsed ? 250 : (-250)) + 'px'
        })
        return
      }
    }
    update = () => {
      const { landId } = this.props
      this.echart2 = echarts.init(this.echart)
      this.echart2.showLoading({
        text: '加载中',
        color: '#c23531',
        textColor: '#000',
        maskColor: '#fff',
        zlevel: 0,
      })
      this.state.error && this.setState({
        error: false
      })
      getWeatherHistorySummary({
        landId,
        type,
      })
        .then(({msg, result}) => {
          if (msg === '200') {
            this.echart2.hideLoading()
            this.setState({
              echart: this.echart2,
              result,
              error: false
            })
          }
        })
        .catch(e => {
          this.echart2.hideLoading()
          this.setState({
            error: true,
          })
        })
      return this.echart2
    }
    render() {
      const { echart } = this.state
      const { leftCollapsed, rightCollapsed } = this.props
      return <div className='hoc'>
        {this.state.error && <div className='echart-error'>
          <div className='reload' onClick={() => this.update()}>
            <Icon type="reload" theme="outlined" />
            <div>点击重新加载</div>
          </div>
        </div>}
        {echart && <WrappedComponent {...this.state} {...this.props}/>}
        <div id={type === 'gdu' ? 'gduSummary' : type} className='echart' ref={echart => this.echart = echart}></div>
      </div>
    }
  }
  HighComponent.propTypes = {
    leftCollapsed: PropTypes.bool,
    rightCollapsed: PropTypes.bool,
    landId: PropTypes.string,
    $container: PropTypes.object,
  }
  return HighComponent
}

export default HOC